
<template>
  <div>
    <div class="followup_wrapper">
      <div class="tabs_table_panel">
        <div class="patient-info-table">
          <div class="tabs_panel">
            <div class="tabs_items active_current">随访问卷</div>
          </div>
          <el-row>
            <el-col
              :span="24"
              style="
                display: flex;
                align-items: center;
                justify-content: flex-end;
              "
            >
              <el-button
                type="primary"
                @click="addQuestionnaire"
                class="distance"
                >新增问卷</el-button
              >
            </el-col>
          </el-row>
          <div class="tabel_wrapper">
            <el-table border :data="tableData">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="questionnaireName"
                width="200px"
                label="问卷名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="questionnaireOrigin"
                min-width="576px"
                label="问卷来源"
                align="center"
              ></el-table-column>

              <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="margin-right: 10px"
                    @click="checkDetails(scope.row.questionnaireId)"
                    >修改</el-button
                  >
                  <el-popconfirm
                    @onConfirm="del(scope.row.questionnaireId)"
                    title="删除问卷后无法恢复，请确定是否删除？"
                    ><el-button slot="reference" type="text">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="paging">
            <el-pagination
              background
              :current-page.sync="pageNum"
              :page-sizes="pageSizes"
              layout="total,prev, pager, next,sizes"
              :total="total"
              @size-change="changeSize"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {
  listFollowYzyQuestionnaire,
  deleteQuestionnaire,
} from "@/api/back-management/follow-up-questionnaire";

export default {
  name: "follow_up_questionnaire",
  data() {
    return {
      // 总数据
      tableData: [],
      total: 0,
      // 默认显示第几页
      pageNum: 1,
      pageSize: 10,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      // 个数选择器（可修改）
      pageSizes: [10, 20, 50],
    };
  },
  /* created() {
    this.initData();
  }, */
  mounted() {
    this.initData();
  },
  methods: {
    calStar(curr) {
      let pageNum = this.pageNum;
      pageNum = (curr - 1) * this.pageSize;
      return pageNum;
    },
    /*  getEduHealthPlans() {
      let params = {
        length: this.pageSize,
        start: this.calStar(this.pageNum),
        revisitPlanTimeStartForSearch: this.date1[0],
        revisitPlanTimeEndForSearch: this.date1[1],
      };
      eduHealthPlans(params).then((res) => {
        this.tableData = res.data.data;
      });
    }, */
    addQuestionnaire() {
      /* this.pageNum = 1;
      this.getEduHealthPlans(); */
      this.$router.push({
        path: "the_new_questionnaire",
        query: {
          judgeStatus: "add",
        },
      });
    },
    changeSize(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initData();
    },
    changePage(page) {
      this.pageNum = page;
      this.initData();
    },
    checkDetails(id) {
      this.$router.push({
        path: "the_new_questionnaire_details",
        query: {
          questionnaireId: id,
        },
      });
    },
    del(id) {
      let params = {
        questionnaireId: id,
      };
      deleteQuestionnaire(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.initData();
        }
      });
    },
    initData() {
      let params = {
        length: this.pageSize,
        start: this.calStar(this.pageNum),
      };
      listFollowYzyQuestionnaire(params).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.count;
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.tabs_panel {
  display: flex;
  .tabs_items {
    font-size: 16px;
    font-weight: bold;
    color: #a1a8b3;
    margin-right: 40px;
    cursor: pointer;
    &.active_current {
      color: #32353b;
      span {
        color: #05afc8;
      }
    }
  }
}

.followup_wrapper {
  background: rgb(245, 246, 250);
  display: flex;
  display: -webkit-box;
  justify-content: space-between;
}
.tabs_table_panel {
  flex: 1;
  background: #fff;
}
.spacing {
  margin-left: 20px;
  width: 230px;
}
/**搜索栏输入框**/
.input_one {
  width: 230px;
}
.long {
  width: 150px;
  color: #000;
}
.distance {
  margin-left: 18px;
}

.patient-info-table {
  background: #fff;
  border-radius: 4px;
}
.paging {
  margin-top: 20px;
  margin-left: 9px;
  padding-bottom: 20px;
}
.tabel_wrapper {
  margin-top: 15px;
}
</style>
<style lang="scss">
.el-pager li {
  background: #ffffff;
  border: 1px solid #e4e7ed;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #05afc8;
}
.el-input__inner {
  color: #000;
}
</style>

